<template>
  <div>
    <div
      class="overall-page-footer"
      :style="{ padding: padding, background: background }"
      :class="{
        'footer-sticky':sticky,
        'footer-fixed':fixed
      }"
    >
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    padding: {
      type: String,
      default: "",
    },
    background: {
      type: String,
      default: "white",
    },
    sticky: {
      type: Boolean,
      default: false,
    },
    fixed: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="scss" scoped>
.overall-page-footer{
  width: 100%;
  box-sizing: border-box;
  background: #000;
  z-index: 2000;
  padding: 10px 20px;
}

.overall-page-footer:empty{
  padding: 0;
}

.footer-sticky{
  position: sticky;
  bottom: 0px;
  left: 0px;
}
.footer-fixed{
  position: fixed;
  bottom: 0px;
  left: 0px;
}

</style>
